import { Link } from 'react-router-dom'
import { useRef, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'

const NotFound = () => {
  const [count, setCount] = useState(5)
  const timerRef = useRef(-1)
  const history = useHistory()

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setCount((prevCount) => prevCount - 1)
    }, 1000)
    return () => {
      console.log('组件卸载了')
      clearInterval(timerRef.current)
    }
  }, [])

  useEffect(() => {
    if (count === 0) {
      history.replace('/home')
    }
  }, [count, history])

  return (
    <div className={styles.root}>
      <h1>抱歉~ 您访问的页面不存在</h1>
      <p>
        将在{count}秒后返回首页（或者：点击立即返回<Link to="/home">首页</Link>
        ）
      </p>
    </div>
  )
}
export default NotFound
